<template>
	<view class="">
		<view class="selector" id='tabs'>
			<view class="title">
				<view class="flex1 flex_c tab-item" :class="{'tab-itema':current == index}"
					v-for="(item, index) in list" @click="clickTabs(index)">{{item.name}}</view>
			</view>
			<view v-show="w_marker>0" class="sel-marker" :style="[{'--mrk-pos':`${mrk_poses[current]}px`},sel_length]">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			list: {
				typeof: Array,
				default: []
			},
			current: {
				default: 0
			}
		},
		data() {
			return {
				mrk_poses: [],
				w_marker: 0, //滑块长度
			}
		},
		watch: {},

		mounted() {
			this.update_poses();
		},
		methods: {
			clickTabs(index) {
				this.$emit('update:current', index)
				this.$emit('clickTabs', index);
			},
			update_poses() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#tabs').boundingClientRect(data => {
					let w_length = data.width
					const querya = uni.createSelectorQuery().in(this);
					querya.selectAll('.tab-item').boundingClientRect(datas => {
						this.w_marker = w_length / datas.length - 5
						this.mrk_poses = datas.map(d => (d.left + d.right) / 2 - data.left);
					}).exec();
				}).exec();
			}
		},
		computed: {
			sel_length() {
				return {
					width: `${this.w_marker}px`
				}
			}
		},
	}
</script>

<style lang="scss">
	.selector {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		height: 76upx;
		background: #EBEBEB;
		border-radius: 40upx;
	}

	.sel-marker {
		// width: 310upx;
		height: 68upx;
		background: #5CC745;
		border-radius: 38upx;

		position: absolute;
		top: 50%;
		left: var(--mrk-pos);
		transform: translate(-50%, -50%);
		transition: all 200ms;
	}

	.title {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 99;
		width: 100%;
		height: 100%;
		display: flex;

		.tab-item {
			color: #666;
			font-size: 28upx;
			font-weight: 500;
			transition: all 200ms;
		}

		.tab-itema {
			color: #fff;
			transition: all 200ms;
		}
	}
</style>